<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      Google Maps V3 API Events for google.maps.Map Demo
    </title>
    <style type="text/css">
      body {
       color: #585858;
       font-family: sans-serif;
      }
      table {
      border-spacing: 2px;
      text-align: left;
      }
      tr {
       background-color: white;
       -webkit-transition:background-color 0.2s linear;
      }
      #map-canvas {
       width: 600px;
       height: 400px;
      }
      #map {
       float: left;
       width: 650px;
      }
      #events {
       overflow: hidden;
      }
    </style>
    <script src="https://maps.google.com/maps/api/js"></script>
    <script type="text/javascript">
      var events = {
        'bounds_changed': 'fired when the viewport bounds have changed.',
        'center_changed': 'fired when the map center property changes.',
        'click': 'fired when the user clicks on the map (but not when they click on a marker or infowindow).',
        'dblclick': 'fired when the user double-clicks on the map. Note that the click event will also fire, right before this one.',
        'drag': 'repeatedly fired while the user drags the map.',
        'dragend': 'fired when the user stops dragging the map.',
        'dragstart': 'fired when the user starts dragging the map.',
        'heading_changed': 'fired when the map heading property changes.',
        'idle': 'fired when the map becomes idle after panning or zooming.',
        'maptypeid_changed': 'fired when the mapTypeId property changes.',
        'mousemove': 'fired whenever the user\'s mouse moves over the map container.',
        'mouseout': 'fired when the user\'s mouse exits the map container.',
        'mouseover': 'fired when the user\'s mouse enters the map container.',
        'projection_changed': 'fired when the projection has changed.',
        'resize': 'Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, \'resize\') .',
        'rightclick': 'fired when the DOM contextmenu event is fired on the map container.',
        'tilesloaded': 'fired when the visible tiles have finished loading.',
        'tilt_changed': 'fired when the map tilt property changes.',
        'zoom_changed': 'fired when the map zoom property changes.'
      };

      function setBackgroundColor(eventName, color) {
        var row = document.getElementById(eventName);
        row.style.backgroundColor = color;
      }

      function setupListener(map, name) {
        google.maps.event.addListener(map, name, function() {
          setBackgroundColor(name, '#99CCFF');
          setTimeout(function() {
           setBackgroundColor(name, 'white');
          }, 500);
        });
      }

      function initialize() {
        populateTable();
        var mapDiv = document.getElementById('map-canvas');
        var map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({position: new google.maps.LatLng(37.4419, -122.1419), map: map});
        for (eventName in events) {
          setupListener(map, eventName);
        }
      }

      // Dynamically create the table of events from the defined hashmap
      function populateTable() {
        var eventsTable = document.getElementById('event_descr');
        var content = '';
        for (var event in events) {
          content += '<tr id="' + event + '"> <th>' + event +
            '</th> <td> ' + events[event] + '</td></tr>';
        }
        eventsTable.innerHTML = content;
      }
      // Load the map
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="main">
      <p>
        This page lists all the events that can be triggered for the
        <code>
        google.maps.Map
        </code>
        object and shows when that happens, by highlighting the names to the right.
      </p>
      </p>
        Play around with the map and see what happens.
        For more information check
      <a href="https://code.google.com/apis/maps/documentation/javascript/reference.html#Map">the API reference</a>.
      </p>
      <div id="map">
        <h2>
          Map
        </h2>
        <div id="map-canvas">
        </div>
      </div>
      <div id="events">
        <h2>
          Events
        </h2>
        <table width="100%" id="event_descr">
        </table>
      </div>
    </div>
  </body>
</html>

